{% extends 'base.html' %}
{% load static %}
{% load filter_null_tag %}

{% block title %}闲聊{% endblock %}

{% block css %}
    <style>
        /*筛选样式*/
        .filter-area .item {
            margin-bottom: 15px;
        }

        .filter-area .item .title {
            padding: 5px 0;
        }

        .filter-area .item .check-list a {
            text-decoration: none;
            display: inline-block;
            min-width: 65px;
        }

        .filter-area .item .check-list label {
            font-weight: 200;
            font-size: 13px;
            margin-left: 3px;
        }

        .filter-area .item .check-list a:hover {
            font-weight: 300;
        }

        .filter-area .item .check-list .cell {
            margin-right: 10px;
        }
    </style>
    <link rel="stylesheet" href="{% static 'plugin/select2-4.0.13/dist/css/select2.min.css' %}">
{% endblock %}

{% block content %}
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-2">
                <div class="panel panel-default">
                    <!-- Default panel contents -->
                    <div class="panel-heading">闲聊菜单分类</div>
                    <div class="panel-body filter-area">
                        <div class="item">
                            <div class="title">问题类型</div>
                            <div class="check-list">
                                {% for item in type_filter %}
                                    {{ item }}
                                {% endfor %}
                            </div>
                        </div>
                        <div class="item">
                            <div class="title">一键审核结论</div>
                            <div class="check-list">
                                {% for item in auto_result_filter %}
                                    {{ item }}
                                {% endfor %}
                            </div>
                        </div>
                        <div class="item">
                            <div class="title">人工审核结论</div>
                            <div class="check-list">
                                {% for item in people_result_filter %}
                                    {{ item }}
                                {% endfor %}
                            </div>
                        </div>
                    </div>

                    <!-- List group -->
                    {#                    <ul class="list-group">#}
                    {#                        <li class="list-group-item">向量库指令</li>#}
                    {#                        <li class="list-group-item">政策法规类</li>#}
                    {#                        <li class="list-group-item">白皮书类</li>#}
                    {#                        <li class="list-group-item">Porta ac consectetur ac</li>#}
                    {#                        <li class="list-group-item">Vestibulum at eros</li>#}
                    {#                    </ul>#}
                </div>
            </div>
            <div class="row col-md-10">
                <div class="panel panel-default">
                    <!-- Default panel contents -->
                    <div class="panel-heading">闲聊列表</div>
                    <div class="panel-body">
                        <div class="col-md-1">
                            <input href="" type="button" value="新增case" class="form-control btn btn-success"
                                   data-toggle="modal"
                                   data-target="#singAddModal"
                                   data-whatever="新增">
                        </div>
                        <div class="col-md-1">
                            <input id="auditBtn" type="button" value="一键审核" class="form-control btn btn-warning">
                        </div>
                    </div>

                    <!-- Table -->
                    <table class="table table-hover table-striped table-bordered table-dark">
                        <tr>
                            <th class="col-md-4">用例</th>
                            <th class="col-md-1">类型</th>
                            <th class="col-md-1">一键审核结论</th>
                            <th class="col-md-1">人工复审结论</th>
                            {#                        <th class="col-md-1">出处</th>#}
                            <th class="col-md-2">备注</th>
                            <th class="col-md-2">操作</th>
                        </tr>

                        {% for obj in issues_object_list %}
                            <tr>
                                <td>{% null_to_empty obj.cmd %}</td>
                                <td>{% null_to_empty obj.get_type_display %}</td>
                                <td>{% null_to_empty obj.result %}</td>
                                <td>{% null_to_empty obj.poeple_result %}</td>
                                {#                            <td>{% null_to_empty obj.source %} {% null_to_empty obj.page %}</td>#}
                                <td>{% null_to_empty obj.comment %}</td>
                                <td>
                                    <a href="" class="btn btn-warning btn-xs" type="button"
                                       data-toggle="modal"
                                       data-target="#checkModal"
                                       data-whatever="人工审核"
                                       data-fid="{{ obj.id }}">
                                        <i class="fa fa-pencil-square-o" aria-hidden="true">人工复审</i>
                                    </a>
                                    <a href="" class="btn btn-success btn-xs" type="button">
                                        <i class="fa fa-pencil-square-o" aria-hidden="true">增加记录</i>
                                    </a>
                                    <a href="" class="btn btn-info btn-xs" type="button"
                                       data-toggle="modal"
                                       data-target="#myModal"
                                       data-whatever="对比详情"
                                       data-fid="{{ obj.id }}">
                                        <i class="fa fa-pencil-square-o" aria-hidden="true"> 详情</i>
                                    </a>
                                    <a href="" class="btn btn-danger btn-xs" type="button"
                                       data-toggle="modal"
                                       data-target="#deleteModal"
                                       data-whatever="删除case确认"
                                       data-fid="{{ obj.id }}">
                                        <i class="fa fa-trash" aria-hidden="true"> 删除</i>
                                    </a>
                                </td>
                            </tr>
                        {% endfor %}
                    </table>
                </div>
            </div>
        </div>

    </div>
    <nav aria-label="Page navigation" style="text-align: right">
        <ul class="pagination" style="margin-top: 0">
            {{ page_html | safe }}
        </ul>
    </nav>

{% endblock %}

{% block js %}
    <script src="{% static 'plugin/select2-4.0.13/dist/js/select2.min.js' %}"></script>
    <script>
        $(function () {
            bindClickCheckFilter();
            initSelect2();
        })

        /*勾选方框触发label效果*/
        function bindClickCheckFilter() {
            $('.filter-area').find(':checkbox').click(function () {
                location.href = $(this).parent().attr('href')
            })
        }

        function initSelect2() {
            $('.select2').select2().on('select2:select', function (e) {
                //选中某一项时触发
                console.log(e.params.data)
                location.href = e.params.data.id
            }).on('select2:unselect', function (e) {
                //移除某一项时触发
                console.log(e.params.data)
                location.href = e.params.data.id
            })
        }
    </script>
{% endblock %}
